<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>位移</title>
    <style>
      .outer {
        width: 200px;
        height: 200px;
        border: 2px solid black;
        margin: 0 auto;
        margin-top: 100px;
        position: relative;
      }
      .son {
        width: 200px;
        height: 200px;
        background-color: deepskyblue;
        /* 在x上移动 可以是像素 可以是百分比(参考自身的大小) 右是正方向 负值时往反方向移动的 */
        /*transform: translateX(50px);*/
        /* 在y轴上移动 可以是像素也可以是百分比  下是正方向*/
        /*transform: translateY(50px);*/
        /* 整两个移动方向 */
        /*transform: translateX(50px) translateY(50px);*/
        /* 用一个translate 一个值 是水平方向 两个值是水平和垂直方向 中间用逗号隔开*/
        /*transform: translate(50px);*/
      }
      /* 位移配合定位实现 水平垂直居中 */
      .son2 {
        width: 50px;
        height: 50px;
        background-color: lime;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%,-50%);
      }
    </style>
</head>
<body>
  <div class="outer">
    <div class="son">你好啊</div>
  </div>
  <div class="outer">
    <div class="son2"></div>
  </div>
</body>
</html>